<template>
  <div class="content">
    <!-- 导航栏 -->
    <div class="navbar">
      <div
        class="nav-item"
        :class="{ active: activeTab === 'album' }"
        @click="changeTab('album')"
      >
        专辑分类
      </div>
      <div
        class="nav-item"
        :class="{ active: activeTab === 'wallpaper' }"
        @click="changeTab('wallpaper')"
      >
        壁纸分类
      </div>
    </div>

    <!-- 分类展示区 -->
    <div class="album-list" v-if="activeTab === 'album'">
      <div
        class="album-item"
        v-for="(item, index) in classifyList"
        :key="index"
        @click="goPreview(item.id,2)"
      >
        <div class="classify-name">{{ item.name }}</div>
        <img :src="item.picurl" alt="专辑封面" />
        <div class="update-time">最近更新：{{ parseTime(item.updateTime, '{y}-{m}-{d}') }}</div>
      </div>
    </div>

    <div class="wall-list" v-if="activeTab === 'wallpaper'">
      <div
        class="wall-item"
        v-for="(item, index) in classifyList"
        :key="index"
        @click="goPreview(item.id,1)"
      >
        <div class="classify-name">{{ item.name }}</div>
        <img :src="item.picurl" alt="壁纸" />
        <div class="update-time">{{ parseTime(item.updateTime, '{y}-{m}-{d}') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { listClassify } from '@/api/wallpaper/classify.js'
import { toast } from '@/utils/common.js'
import { parseTime } from '@/utils/ruoyi';
import { useRouter } from "vue-router";
const router = useRouter();
// 数据获取和处理逻辑
const classifyList = ref([])
const activeTab = ref('album') // 默认选中专辑分类
const loadingMore = ref(false)
const noData = ref(false)
const queryParams = {
  pageNum: 1,
  pageSize: 15,
  type: 2,
}
const getClassify = async (append = false) => {
  try {
    const res = await listClassify(queryParams)
    if (!append) {
      classifyList.value = res.rows
    } else {
      classifyList.value = [...classifyList.value, ...res.rows]
    }
    if (res.rows.length < queryParams.pageSize) {
      noData.value = true
    } else {
      noData.value = false // 确保在有数据时重置 noData
    }
  } catch (error) {
    console.error(error)
  } finally {
    loadingMore.value = false
  }
}


const changeTab = (to) => {
  activeTab.value = to
  queryParams.pageNum = 1
  noData.value = false
  if(to === 'album'){
    queryParams.type = 2;
  }else{
    queryParams.type = 1;
  }
  getClassify()
  console.log('Fetched data:', classifyList.value) // 添加日志
}

onMounted(() => {
  getClassify()
})

// 跳转到分类列表页面
const goPreview = (id,type) => {
  router.push(`/classlist/index?id=${id}&type=${type}`);
};

</script>

<style scoped lang="scss">
.content {
  padding: 20px;
  height: 100vh; // 让内容区域占据整个屏幕高度
  overflow-y: auto; // 允许垂直滚动

  .navbar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

    .nav-item {
      font-size: 18px;
      color: #999;
      padding: 10px;
      cursor: pointer;
      transition: color 0.3s, border-bottom 0.3s;

      &.active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }

      &:hover {
        color: darken(#409eff, 10%);
      }
    }
  }

  .wall-list,
  .album-list {
    padding: 30px;
    display: grid;
    gap: 15px;
    max-width: 100%; // 最大宽度为100%
    width: 100%; // 宽度为100%

    .classify-name {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.5); // 背景颜色稍微透明一些，以确保数字清晰可见
      color: white; // 文字颜色为白色
      padding: 5px 10px; // 给数字周围留一点空间
      border-radius: 5px; // 圆角边框
      font-size: 18px; // 字体大小
      z-index: 1; // 确保排名数字位于图片之上
    }



    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; // 图片覆盖整个区域
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .wall-list {
    grid-template-columns: repeat(5, 1fr); // 每行五列

    .wall-item {
      width: 100%;
      padding-bottom: 200%; // 保持图片宽高比为1:2
      position: relative;
      .update-time {
        position: absolute;
        bottom: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
        z-index: 1;
      }
    }
  }

  .album-list {
    grid-template-columns: repeat(4, 1fr); // 每行四列，根据需要调整

    .album-item {
      width: 100%;
      padding-bottom: 150%; // 保持图片宽高比为1:1.5，根据需要调整
      position: relative;

      .update-time {
        position: absolute;
        bottom: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
        z-index: 1;
      }
    }
  }
}
</style>
